import React, { useEffect } from 'react';
import useSetHtmlBody from 'hooklib/useSetHtmlBody';
import styles from './scale.less';

function useTraceWindowResize() {
  useEffect(() => {
    const htmlDom = document.getElementsByTagName('html')[0];
    console.log('initsize', window.innerWidth, window.innerHeight);
    onresize();
    function onresize() {
      console.log('resize', window.innerWidth, window.innerHeight);
      const scaleX = window.innerWidth / 1024;
      const scaleY = window.innerHeight / 768;
      // htmlDom.style.transform = `scale(${scaleX}, ${scaleY})`;
      document.body.style.transform = `scale(${scaleX}, ${scaleX})`;
      document.body.style.height = `${(768 / scaleX) * scaleY}px`;
    }
    window.addEventListener('resize', onresize);
    return () => {
      window.removeEventListener('resize', onresize);
    };
  }, []);
}



/**
 * 自动 transform:scale()缩放，基准 1920*1080
 */
export default function Scale() {
  useSetHtmlBody(styles);
  useTraceWindowResize();
  return (
    <div className={styles.normal}>
      <h1 className={styles.lenByPixel}>Page scale</h1>
    </div>
  );
}
